<template>
  <div>
    <div class="cooperation">
      <div class="scrolls">
        <!-- 合作券 -->
        <div class="title bold">
          <span>券商合作</span>
          <img
            :src="`/src/assets/icons/menu-${menuActive.length === Object.keys(allList).length ? 'left' : 'right'}.png`"
            @click="menuAll"
          >
        </div>
        <div class="column" v-for="(v, k) in allList" :key="k" :class="{hide: inArray(menuActive, k) === false}">
          <div class="header" @click="menuCheck(k)">
            <span>{{k}}&nbsp;&nbsp;x{{v.length}}</span>
            <img :src="`/src/assets/icons/arrow-${inArray(menuActive, k) !== false ? 'up' : 'down'}-white.png`">
          </div>
          <div class="item" 
            v-for="g in v" :key="g.id"
            :class="{active: inArray(isActive, g.id) !== false, disabled: g.flag}"
            @click="chooseTicket(g.id, g.flag)"
          >
            <img src="/src/assets/icons/ok-tick.png">
            {{g.name}}
          </div>
          <div class="item" :class="{space: v.length % 3 === 2}" v-if="v.length % 3 === 2"></div>
        </div>
        <!-- 自动确认时间 -->
        <div class="title">自动确认时间</div>
        <div class="column time">
          <div class="item" 
            v-for="(v, k) in timeList" :key="k"
            :class="{active: timeActive === k}"
            @click="chooseTime(k)"
          >
            <img src="/src/assets/icons/ok-tick.png">
            {{v}}
          </div>
          <div class="item" :class="{space: timeList.length % 3 === 2}" v-if="timeList.length % 3 === 2"></div>
        </div>
        <div class="line"></div>
        <div class="hint">
          <div class="title">券商合作规则</div>
          <div>
            <p>1. 付款规则：所有商品都是直接先在线上付款购买；</p>
            <p>2. 价格规则：拿货价格会根据您选择的“自动确认时间”来进行阶梯式上浮，具体上浮情况如下表：</p>
            <table border="1" cellpadding="0" cellspacing="0">
              <tr>
                <td>12小时</td>
                <td>千分之一</td>
              </tr>
              <tr>
                <td>24小时</td>
                <td>千分之三</td>
              </tr>
              <tr>
                <td>48小时</td>
                <td>千分之六</td>
              </tr>
              <tr>
                <td>72小时</td>
                <td>百分之一</td>
              </tr>
            </table>
            <p>3. 批量规则：付款成功后，可以通过生成的提货链接&提货码，实现自助批量提货；</p>
            <p>4. 券商合作流程，<router-link :to="{name: 'ExplainCoupon'}">请参考这里</router-link></p>
            <p>希望合作伙伴选择对您合适的“自动确认时间”！</p>
            <p>请知晓：自动确认时间越长、风险也即越大！</p>
            <p>更希望彼此长期愉快合作、共同发展、合作共赢！</p>
            <p>相信：跟惠权益合作将大大提高您的收货效率、减少碎片化时间！</p>
          </div>
        </div>
      </div>
      <!-- 底部菜单 -->
      <footer class="footer-button">
        <mt-button @click.native="sendSms">立即申请</mt-button>
      </footer>
      <!-- 用户手机号绑定 -->
      <mobile-bind ref="mobileBind" @sendSms="sendSms"></mobile-bind>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'Mint-ui'
  import MobileBind from '@/components/MobileBind'

  export default {
    name: 'Cooperation',
    components: {
      MobileBind
    },
    data () {
      return {
        allList: [],
        timeList: {1: '12h', 2: '24h', 3: '48h', 4: '72h'},
        isActive: [],
        timeActive: 0,
        menuActive: []
      }
    },
    methods: {
      getInfo () {
        this.$post('/vue/coupon_customer/be_coupon_customer', '').then(data => {
          this.allList = data
        })
      },
      chooseTicket (id, status) {
        if (status) {
          return false
        }
        const index = this.inArray(this.isActive, id)
        if (index === false) {
          if (this.isActive.length >= 6) {
            msg('每个券商限制6中品类')
            return false
          }
          this.isActive.push(id)
        } else {
          this.isActive.splice(index, 1)
        }
      },
      chooseTime (id) {
        this.timeActive = id
      },
      sendSms () {
        this.$post('/vue/goods/check_user_phone', '').then(data => {
          if (data === 'need_phone') {
            this.$refs.mobileBind.popShow = true
          } else {
            this.save()
          }
        })
      },
      save () {
        let params = {
          middle_category_id: this.isActive,
          confirm_time: this.timeActive
        }
        if (this.isActive.length === 0) {
          msg('请选择想要合作的券')
          return false
        }
        if (this.timeActive === 0) {
          msg('请选择合作券确认收货的时间')
          return false
        }
        this.$post('/vue/coupon_customer/save', params).then(data => {
          msg('申请成功')
          setTimeout(() => {
            this.$router.go(-1)
          }, 2000)
        })
      },
      menuCheck (id) {
        let i = this.inArray(this.menuActive, id)
        if (i === false) {
          this.menuActive.push(id)
        } else {
          this.menuActive.splice(i, 1)
        }
      },
      menuAll () {
        if (this.menuActive.length === Object.keys(this.allList).length) {
          this.menuActive = []
        } else {
          this.menuActive = Object.keys(this.allList)
        }
      },
      inArray (arr, val) {
        for (let i = 0; i < arr.length; i++) {
          if (val === arr[i]) {
            return i
          }
        }
        return false
      }
    },
    mounted () {
      this.getInfo()
    }
  }
  const msg = m => {
    Toast({
      message: m,
      position: 'bottom',
      duration: 2000
    })
  }
</script>

<style lang="less">
  @c-80: rgb(80, 80, 80);
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-blue: rgb(108, 184, 222);
  @c-light-blue: rgb(240, 244, 247);
  @c-orange: rgb(245, 166, 35);

  .cooperation {
    padding: 0 12px;
    background-color: #FFF;
    text-align: left;
    .scrolls {
      height: calc(~'100vh - 56px');
      overflow-x: hidden;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
    }
    .title {
      font-size: 16px;
      line-height: 32px;
      color: @c-80;
      margin: 12px 0;
      display: flex;
      align-items: center;
      align-content: center;
      justify-content: space-between;
      &.bold {
        font-weight: bold;
      }
      img {
        width: 24px;
        height: 24px;
      }
    }
    .column {
      height: auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      transition: 0.25s all;
      &.hide {
        height: 40px;
        overflow: hidden;
        margin-bottom: 12px;
      }
      .header {
        width: 100%;
        border-radius: 8px;
        background-color: @c-blue;
        font-size: 13px;
        line-height: 24px;
        color: #FFF;
        padding: 8px 12px;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: space-between;
        img {
          width: 24px;
          height: 24px;
        }
      }
      .item {
        width: 30%;
        flex: 0 0 auto;
        padding: 3px 0;
        text-align: center;
        font-size: 12px;
        line-height: 24px;
        color: @c-124;
        background-color: @c-light-blue;
        border-radius: 6px;
        margin-bottom: 12px;
        transition: 0.25s all;
        img {
          width: 0;
          height: 12px;
          vertical-align: text-top;
          transition: 0.25s all;
          transform: scale(0);
        }
        &.space {
          background-color: transparent;
        }
        &.active {
          color: @c-blue;
          background-color: #f5f5f5;
          img {
            width: 12px;
            transform: scale(1);
          }
        }
        &.disabled {
          color: #FFF;
          background-color: @c-169;
        }
      }
      &.time {
        .item {
          width: 20%;
        }
      }
    }
    .line {
      margin-left: -12px;
      margin-right: -12px;
      height: 8px;
      background-color: @c-light-blue;
    }
    .hint {
      color: @c-124;
      font-size: 12px;
      .title　{
        font-size: 12px;
        line-height: 24px;
        color: @c-orange;
        justify-content: center;
      }
      p {
        line-height: 24px;
      }
      .ti-2 {
        text-indent: 2em;
      }
      table {
        width: 75%;
        margin: 12px auto;
        text-align: center;
        border-color: @c-226;
      }
    }
    /* ---底部按钮--- */
    .footer-button {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
      background-color: #FFF;
      text-align: center;
      border-top: 1px solid @c-235;
      .mint-button {
        height: 40px;
        padding: 7px 0;
        margin: 8px;
        width: 168px;
        text-align: center;
        background-color: #6cb8de;
        border-radius: 20px;
        .mint-button-text {
          font-size: 13px;
          line-height: 24px;
          color: #FFF;
        }
      }
    }
  }
</style>